<template>
    <div style="width: 100%;">
        <el-form :model="form" label-width="auto" style="margin: 20px;max-width: 400px">
            <el-form-item prop="username" label="姓名">
                <el-input v-model="form.username" placeholder="请输入姓名" clearable />
            </el-form-item>
            <el-form-item prop="nickname" label="昵称">
                <el-input v-model="form.nickname" placeholder="请输入昵称" clearable />
            </el-form-item>
            <el-form-item prop="addtime" label="入职时间">
                <el-date-picker style="width: 100%;" v-model="form.addtime" type="date" />
            </el-form-item>
            <el-form-item prop="hobby" label="爱好">
                <el-input v-model="form.hobby" type="textarea" placeholder="请输入爱好" clearable />
            </el-form-item>
            <el-form-item prop="avator" label="头像">
                <el-upload class="avator-uploader" action="" :show-file-list="false" :http-request="upFile">
                    <img v-if="form.avator" :src="form.avator" class="avator" />
                    <el-icon v-else class="avator-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item class="btn">
                <el-button type="primary" @click="onSubmit">修改</el-button>
                <el-button type="primary" @click="onCancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { fileUpload, ossUrl } from '@/utils/ali-oss.js'
import dayjs from 'dayjs'
import { getUserInfo, updateUser } from '@/api/user'
import { useUserStore } from '@/store/user.js'

const store = useUserStore()

const form = reactive({
    username: '',
    addtime: '',
    nickname: '',
    hobby: '',
    avator: ''
})
const formOption = reactive({
    username: '',
    nickname: '',
    hobby: '',
    avator: ''
})

const upFile = async (rawFile) => {
    console.log('rawFile: ', rawFile);
    const imgType = ["image/png", "image/jpg", "image/jpeg", "image/gif", "image/svg"]
    if (!imgType.includes(rawFile.file.type)) {
        ElMessage.warning('头像格式只能为图片！');
        return
    }
    const fileName = 'avator/' + dayjs().valueOf() + '_' + rawFile.file.name;
    const res = await fileUpload(fileName, rawFile.file);
    if (res.res.status == 200) {
        form.avator = res.url;
        ElMessage.success('头像上传成功！');
    } else {
        ElMessage.error('头像上传失败！');
    }
}

const getUser = async () => {
    const res = await getUserInfo();
    form.username = res.data.username;
    form.addtime = res.data.addtime;
    form.nickname = res.data.nickname;
    form.hobby = res.data.hobby;
    form.avator = res.data.avator || '';
    store.setAvatar(form.avator);
}

const onSubmit = async () => {
    formOption.avator = form.avator;
    formOption.username = form.username;
    formOption.nickname = form.nickname;
    formOption.hobby = form.hobby;
    formOption.role = JSON.parse(sessionStorage.getItem('role'))
    const res = await updateUser(formOption);
    if (res.code === 0) {
        ElMessage.success(res.data);
        getUser();
    }
}

const onCancel = () => {
    getUser()
}

onMounted(() => {
    getUser()
})

</script>

<style lang="scss" scoped>
.avator-uploader .el-upload {
    border: 1px dashed #8c939d;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avator-uploader .el-upload:hover {
    border-color: none;
}

.el-icon.avator-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.avator-uploader .avator {
    width: 178px;
    height: 178px;
    display: block;
}

.btn {
    :deep(.el-form-item__content) {
        justify-content: center !important;
    }
}
</style>